React 项目配置之 Win10 linux环境

团队新启动一个 React 项目，有些配置命令是 Linux 指令，同事用的 Mac 电脑，我 git clone 下来之后，发现 npm install 和 npm start 都有报错，原因是 package-lock.json 配置里面有用到软链接的添加和删除（linux指令），而我的是 win10系统，默认不支持，git bash 兼容性也不好，莫名报错，为了保持开发环境的一致性，决定在自己本地启用 linux 服务，这次使用 WSL（win10 的 linux 子系统）来实现。

Windows Subsystem for Linux（简称 WSL）是一个为在 Windows 10 上能够原生运行 Linux 二进制可执行文件（ELF格式）的兼容层。它是由微软与 Canonical 公司合作开发，目标是使纯正的 Ubuntu 14.04 “Trusty Tahr” 映像能下载和解压到用户的本地计算机，并且映像内的工具和实用工具能在此子系统上原生运行。
WSL 提供了一个微软开发的 Linux 兼容内核接口（不包含 Linux 代码），来自 Ubuntu 的用户模式二进制文件在其上运行。
该子系统不能运行所有Linux软件，例如那些图形用户界面，以及那些需要未实现的 Linux 内核服务的软件，不过，这可以用在外部 X 服务器上运行的图形 X Window 系统缓解。
此子系统起源于命运多舛的 Astoria 项目，其目的是允许 Android 应用运行在 Windows 10 Mobile上。
此功能组件从 Windows 10 Insider Preview build 14316 开始可用。
——维基百科

一、安装 linux 子系统

开启两个 window 权限

设置 => 更新与安全 => 针对开发人员 => 开发人员模式

控制面版 => 程序 => 应用或关闭 Window 功能 => 选中：适用于Linux 的Window 子系统

重启一下电脑~

安装

直接打开 window 商店，搜索 linux, 下载、安装、启动；这里我下载的是 Ubuntu 版本，也是大家使用最多的一个 WSL 版本。

更换 Ubuntu 版本的镜像源

这个主要是解决 Ubuntu 系统安装软件时速度慢的问题，毕竟默认镜像源是在国外，你懂的

更换源我找的阿里的，中科大的也可以用，都列出来了

// 阿里源
deb http://mirrors.aliyun.com/ubuntu/ trusty main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ trusty-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ trusty-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ trusty-proposed main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ trusty-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ trusty main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-backports main restricted universe multiverse

// 中科大源
deb https://mirrors.ustc.edu.cn/ubuntu/ xenial main restricted universe multiverse
deb https://mirrors.ustc.edu.cn/ubuntu/ xenial-updates main restricted universe multiverse
deb https://mirrors.ustc.edu.cn/ubuntu/ xenial-backports main restricted universe multiverse
deb https://mirrors.ustc.edu.cn/ubuntu/ xenial-security main restricted universe multiverse

更换步骤

1. 备份原来的数据源配置文件
cp /etc/apt/sources.list /etc/apt/sources.list_backup

2. 编辑数据源配置文件，执行如下指令后继续点击回车键，进入vim 编辑模式，修改（此处可以了解下 vim 常用指令）完成后，Esc 键退出，wq! 指令保存（shift + ':'调出）
vi /etc/apt/sources.list
3. 更新配置
apt-get update

二、配置前端开发环境

要知道，这个 linux 系统是一个独立的系统，我们在 window 上安装的软件如 Nodejs 等都需要在 linux 下重新安装才行，下面介绍常用工具的安装方法

Nodejs的安装

1. 使用 curl 命令来下载nodejs 的源码
curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -
2. Ubuntu包管理开始安装nodejs
sudo apt-get install -y nodejs（sudo是mac特有的，win下忽略）

n 模块的安装与使用

n 模块是专门用来管理Nodejs 版本的，它的作者同时也是鼎鼎大名的 express 框架的作者，它的特点就是简单，缺点也很明显就是不支持window 系统。

npm install -g n // 全局安装
n latest // 安装最近的正式版
n stable // 安装最近的稳定版
n rm 10.15.2 // 删除某个版本
n use 10.15.2 // 使用某个版本

nvm的安装与使用

其实nvm 和 n模块类似，但是我感觉更好用，可以用它在全局安装多个 Nodejs 版本并随意切换，下面是 linux 下的安装方法（window环境有类似的 gnvm）：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash 下载源码

source ~/.bashrc 源码解析安装

nvm --version 有版本信息则说明安装成功

nvm ls 可列出本地所有安装的 Nodejs 版本

nvm ls-remote 可查看所有 Nodejs 版本

nvm install <version>(版本号) 例如：nvm install v10.15.2

nvm alias default v10.15.2 指定默认版本号

nvm -v 查看版本

nrm的安装与使用

nrm 是一个用来管理和快速切换私人 npm 配置的工具，可用来随意的切换 npm 镜像源，比如公司内网镜像，淘宝镜像等，建议全局安装

npm install nrm -g --save 全局安装

nrm ls 查看默认配置，这里会列出所有的镜像

nrm current 查看当前使用的是哪个源

nrm use <源名> 切换到其它源，如 nrm use cnpm

nrm add 命令可添加公司私有 npm 源，如 http://baozun.com(随便写的)，起个别名叫 baobao，nrm add baobao http://baozun.com
此时再执行 nrm ls，发现 baobao 已添加成功

nrm test npm 测速

nrm del baobao 删除源配置

好啦，到这里该装的都差不多了，我来试下启动 React 项目:

npm install (安装所需依赖)
npm start (启动ing)

成功啦！！！

好啦，现在项目成功的在 linux 环境下启动，而我的代码编辑工作还是在 window 环境，团队开发环境保持了一致，感觉很棒。

参考链接：

微信扫一扫，公众号：编码美学